import { Card, DatePicker, Spin, Tabs } from 'antd';
import type { RankData, TimeData } from '../data';

import styles from '../style.less';
import { FormattedMessage } from '@@/plugin-locale/localeExports';
import type { Moment } from 'moment';
import type { RangeValue } from 'rc-picker/lib/interface';
import ReactEcharts from 'echarts-for-react';
import type { EChartsOption } from 'echarts-for-react/lib/types';

const { TabPane } = Tabs;

type DataType = { range: TimeData; rank: RankData };

export interface FlowData {
  flowIn: DataType,
  flowOut: DataType,
}

interface StatisticCardProps {
  loading: boolean;
  isActive: (key: 'today' | 'week' | 'month' | 'year') => string; // return style string
  data: FlowData;
  rangePickerValue: RangeValue<Moment>;
  handleRangePickerChange: (values: RangeValue<Moment>, formatString: [ string, string ]) => void;
  selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
  activeKey: string;
  onTabChange?: (activeKey: string) => void;
}

const chartDataTransfer = (data: DataType): number[] => {
  return data.range.map(v => {
    return v.y;
  });
};

const StatisticCard = (props: StatisticCardProps) => {
  const {
    loading,
    isActive,
    data = {
      flowIn: { range: [], rank: [] },
      flowOut: { range: [], rank: [] },
    },
    rangePickerValue,
    handleRangePickerChange,
    selectDate,
    activeKey,
    onTabChange,
  } = props;

  const getFlowDataOptions: EChartsOption = (type: string) => {

    const flowInDataValue: number[] = chartDataTransfer(data.flowIn);
    const flowOutDataValue: number[] = chartDataTransfer(data.flowOut);


    const xAxis = data.flowIn.range.map(v => v.x);

    const option: EChartsOption = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [ '驶入', '驶离' ],
      },
      xAxis: {
        type: 'category',
        name: '时间',
        data: xAxis,
      },
      yAxis: [
        { type: 'value', name: '场次', min: 0, splitNumber: 5 },
      ],
      series: [
        {
          name: '驶入',
          data: flowInDataValue,
          type: 'line',
        },
        {
          name: '驶离',
          data: flowOutDataValue,
          type: 'line',
        },
      ],
    };

    if (type === 'flow_in') {
      return { ...option, series: [ { ...option.series[0], name: '驶入' } ] };
    }
    if (type === 'flow_out') {
      return { ...option, series: [ { ...option.series[1], name: '驶离' } ] };
    }
    return option;
  };

  return (
    <Spin spinning={ loading }>
      <Card bordered={ false } bodyStyle={ { padding: 20 } }>
        <div className={ styles.salesCard }>
          <Tabs
            activeKey={ activeKey }
            onChange={ onTabChange }
            tabBarExtraContent={
              <div className={ styles.salesExtraWrap }>
                <div className={ styles.salesExtra }>
                  <a className={ isActive('today') } onClick={ () => selectDate('today') }>
                    <FormattedMessage
                      id='dashboard-analysis.analysis.all-day'
                      defaultMessage='All Day'
                    />
                  </a>
                  <a className={ isActive('week') } onClick={ () => selectDate('week') }>
                    <FormattedMessage
                      id='dashboard-analysis.analysis.all-week'
                      defaultMessage='All Week'
                    />
                  </a>
                  <a className={ isActive('month') } onClick={ () => selectDate('month') }>
                    <FormattedMessage
                      id='dashboard-analysis.analysis.all-month'
                      defaultMessage='All Month'
                    />
                  </a>
                  <a className={ isActive('year') } onClick={ () => selectDate('year') }>
                    <FormattedMessage
                      id='dashboard-analysis.analysis.all-year'
                      defaultMessage='All Year'
                    />
                  </a>
                </div>
                <DatePicker.RangePicker
                  value={ rangePickerValue }
                  onChange={ handleRangePickerChange }
                  style={ { width: 256 } }
                />
              </div>
            }
            size='large'
            tabBarStyle={ { marginBottom: 24 } }
          >
            <TabPane
              tab={
                <FormattedMessage id='dashboard-analysis.analysis.home' defaultMessage='TabPane' />
              }
              key='home'
            >
              <ReactEcharts option={ getFlowDataOptions('home') } style={ { height: '400px' } } className={ 'react-for-echarts' } />
            </TabPane>

            <TabPane
              tab={
                <FormattedMessage id='dashboard-analysis.analysis.flowin' defaultMessage='TabPane' />
              }
              key='flowin'
            >
              <ReactEcharts option={ getFlowDataOptions('flow_in') } style={ { height: '400px' } } className={ 'react-for-echarts' } />
            </TabPane>

            <TabPane
              tab={
                <FormattedMessage id='dashboard-analysis.analysis.flowout' defaultMessage='TabPane' />
              }
              key='flowout'
            >
              <ReactEcharts option={ getFlowDataOptions('flow_out') } style={ { height: '400px' } } className={ 'react-for-echarts' } />
            </TabPane>

          </Tabs>
        </div>
      </Card>
    </Spin>
  );
};

export default StatisticCard;